import classnames from 'classnames'
import Icon from '../../../../components/Icon'
import styles from './index.module.scss'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { Modal } from 'antd-mobile'

// 导入中文包
import 'dayjs/locale/zh-cn'
import { useSelector } from 'react-redux'
dayjs.locale('zh-cn')
// 拓展dayjs 有显示相对时间的功能
dayjs.extend(relativeTime)
const ArticleItem = ({ className, article }) => {
  // console.log(article)
  //   const type = 3
  // const images = ['http://geek.itheima.net/resources/images/3.jpg']
  //   const images = [
  //     'http://geek.itheima.net/resources/images/91.jpg',
  //     'http://geek.itheima.net/resources/images/3.jpg',
  //     'http://geek.itheima.net/resources/images/52.jpg',
  //   ]
  const {
    cover: { type, images },
    title,
    aut_name,
    comm_count,
    pubdate,
  } = article

  const isLoging = useSelector((state) => !!state.login.token)
  return (
    <div className={styles.root}>
      {/* t3 三图结构 none-mt 无图结构 */}
      <div
        className={classnames(
          'article-content',
          type === 3 ? 't3' : '',
          type === 0 ? 'none-mt' : ''
        )}
      >
        <h3>{title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            {images.map((item, i) => (
              <div className="article-img-wrapper" key={i}>
                <img src={item} alt="" />
              </div>
            ))}
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 ? 'none-mt' : '')}>
        <span>{aut_name}</span>
        <span>{comm_count}评论</span>
        <span>{dayjs(pubdate).locale('zh-cn').from(Date.now())}</span>
        <span className="close">
          {isLoging && (
            <Icon
              type="icon-close"
              onClick={() => {
                Modal.show({
                  content: '人在天边月上明，风初紧，吹入画帘旌',
                  closeOnAction: true,
                  actions: [
                    {
                      key: 'online',
                      text: '不感兴趣',
                      primary: true,
                    },
                    {
                      key: 'download',
                      text: '反馈垃圾内容',
                      primary: true,
                    },
                    {
                      key: 'share',
                      text: '拉黑作者',
                      primary: true,
                    },
                  ],
                })
              }}
            />
          )}
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
